// forwardRef
// 作用：允许组件使用ref将一个DOM节点暴露给父组件

import { forwardRef, useRef } from "react"

// 子组件
function Son1 () {
  return <input type="text" />
}

// 子组件，使用forwardRef包裹暴露组件DOM
const Son2 = forwardRef((props, ref) => {
  return <input type="text" ref={ref} />
})


// 父组件
function App06 () {
  // 无法获取子组件DOM元素
  const sonRef1 = useRef(null)
  const showRef1 = () => {
    console.log(sonRef1)
    sonRef1?.current?.focus()
  }

  // 只有sonRef2才能获得子组件DOM元素
  const sonRef2 = useRef(null)
  const showRef2 = () => {
    console.log(sonRef2)
    sonRef2.current.focus()
  }
  return (
    <>
      <Son1 ref={sonRef1} />
      <button onClick={showRef1}>focus1</button>
      <br/>
      <Son2 ref={sonRef2} />
      <button onClick={showRef2}>focus2</button>
    </>
  )
}

export default App06